import React from 'react';
import { FlatList, StyleSheet, Text } from 'react-native';
import { commonStyles } from '../../configs/commonStyle';
import BasePage from '../BasePage';
import NavigationBar from '../common/NavigationBar';
import ViewUtils from '../../utils/ViewUtils';
import { inject, observer } from 'mobx-react';
import { TouchableOpacity, View } from 'react-native-ui-lib';
import ListEmpty from '../common/ListEmpty';
import { setClipboardContent } from '../../utils/util';

/**
 * 中转蛋糕
 */
@inject('userStore', 'appStore')
@observer
export default class TransferCakeList extends BasePage {
  constructor(props) {
    super(props);
    this.params = this.props.navigation.state.params;
    this.warehouseData = this.params.item;
    const typeLabelMap = {
      1: '已入库',
      2: '未入库',
    }
    this.titleLabel = `${this.warehouseData.name} - ${typeLabelMap[this.warehouseData.type]} - ${this.warehouseData.text}`
    this.state = {
      dataList: [],
    };
  }

  componentDidMount() {
    this.setState({
      dataList: this.warehouseData.list || [],
    });
  }

  componentWillUnmount() { }

  render_item = ({ item, index }) => {
    return (
      <View>
        <View style={styles.itemTitle}>
          <TouchableOpacity
            flex
            activeOpacity={1}
            onPress={() => setClipboardContent(item?.xmbzNo)}>
            <Text style={commonStyles.text_black_14}>
              {item.goodsName}（单号：{item?.xmbzNo}）
            </Text>
          </TouchableOpacity>
        </View>
        <View style={styles.contentWrap}>
          <View style={styles.itemWrap}>
            <Text style={commonStyles.text_black_13}>配送时间</Text>
            <Text style={commonStyles.text_black_13}>
              {item?.deliveryStartTime}
            </Text>
          </View>
        </View>
      </View>
    );
  };

  render() {
    const { dataList, titleLabel } = this.state;
    return (
      <View useSafeArea style={commonStyles.body_primary}>
        <NavigationBar
          title={'蛋糕列表'}
          backgroundColor={'transparent'}
          leftButton={ViewUtils.getLeftButton(() => this._onBackPress())}
        />
        <View style={commonStyles.container}>
          <View style={styles.titleBox}>
            <Text style={{fontSize: 18, color: '#333'}}>{this.titleLabel}</Text>
          </View>
          <FlatList
            data={dataList}
            showsVerticalScrollIndicator={false}
            style={{}}
            contentContainerStyle={{ flexGrow: 1, paddingHorizontal: 10 }}
            keyExtractor={(item, index) => 'menu_' + index}
            renderItem={this.render_item}
            ListEmptyComponent={() => (
              <ListEmpty showEmpty={this.state.showEmpty} />
            )}
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  titleBox: {
    fontSize: 20,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 10,
  },
  itemTitle: {
    justifyContent: 'space-between',
    flexDirection: 'row',
    alignItems: 'center',
    borderTopLeftRadius: 4,
    borderTopRightRadius: 4,
    backgroundColor: '#F9D63B',
    marginHorizontal: 15,
    paddingHorizontal: 10,
    paddingVertical: 6,
    marginTop: 15,
  },
  contentWrap: {
    backgroundColor: 'white',
    marginHorizontal: 15,
    paddingHorizontal: 10,
    paddingVertical: 15,
  },
  itemWrap: {
    justifyContent: 'space-between',
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 2,
  },
});
